<template>
  <div @click="play_song" class="list_item">
    <!-- 序列号 -->
    <slot></slot>
    <div class="left">
      <!-- 歌名 -->
      <div class="song_name" v-html="c_name"></div>
      <!-- 歌手-歌名 -->
      <div class="singer_name">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wusunyinzhi" />
        </svg>
        {{ singer | formatName }} -
        <em v-html="c_name"></em>
      </div>
    </div>
    <!-- 播放/暂停 -->
    <div class="right">
      <!-- 需要第二个条件，当前 song 实例内的 id 与正在播放中的音频 id 是否一致 -->
      <i
        @click.stop="pause_song"
        v-if="playing && id == song_id"
        class="iconfont icon-zanting"
      ></i>
      <i v-else class="iconfont icon-bofang"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { check_music } from "@/api/common";
import { Toast } from "vant";
export default {
  props: {
    name: String, // 歌名
    singer: Array, // 歌手
    id: Number, // 歌曲id
    duration: Number, // 时间
    keyword: String, // 关键字
    id_list: Array, // 用于接收当前歌曲的歌单 id 集合
    idx: Number, // idx 用于接收一个下标，表示当前歌曲在歌单内的位置，为了方便后续通过 +1 -1 来切换上下首
  },
  computed: {
    // 播放状态，歌曲id
    ...mapState(["playing", "song_id"]),
    // 关键字变色
    c_name() {
      if (!this.keyword) {
        return this.name;
      }
      return this.name.replace(
        this.keyword,
        `<span style="color:#507daf;">${this.keyword}</span>`
      );
    },
  },
  methods: {
    // 播放指定的音乐
    async play_song() {
      // 在播放音频前, 先验证是否有版权, 如果没有则使用 Toast 弹窗提示;
      let check_res = await check_music(this.id);
      // 如果有权限, 则 获取歌曲详情 放至 vuex 并 播放歌曲;
      if (check_res.data.success) {
        // 将 id 传递给 $audio 对象的 playSong 方法进行播放
        this.$audio.playSong(this.id);
        // 将当前 歌曲所在列表的 id 集合存至仓库内作为播放列表
        this.$store.commit("set_play_list", this.id_list);
        // 改变 vuex 内歌曲的下标
        this.$store.commit("change_idx", this.idx);
      } else {
        // 弹窗告知用户无版权
        Toast.fail("暂无版权");
      }
    },
    // 暂停歌曲
    pause_song() {
      this.$audio.pause();
    },
  },
  filters: {
    // 对多个歌手进行拼接
    formatName(value) {
      if (!value) {
        return value;
      }
      return value
        .map((val) => {
          return val.name;
        })
        .join(" / ");
    },
  },
};
</script>

<style lang="scss" scoped>
.list_item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 5px 0;
  .left {
    flex-grow: 1;
    overflow: hidden;
    .song_name,
    .singer_name {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .song_name {
      line-height: 26px;
    }
    .singer_name {
      line-height: 18px;
      font-size: 12px;
    }
  }
  .right {
    width: 42px;
    flex-shrink: 0;
    text-align: center;
    i {
      font-size: 24px;
    }
  }
}
</style>
